<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-21 16:02:48
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-18 08:53:37
 * @FilePath: \sr_system_manager_ui\src\views\achievementReward\assessmentReward\rewardWay\index.vue
 * @Description: 奖励办法列表
-->
<template>
  <div class="reward-way-container">
    <TableForm ref="tableRef" :data="dataList" :columns="columns" :tableLoading="loading" :total-count="total"
      :hide-right-first-btn="true"
      :hide-right-second-btn="true"
      :hide-right-third-btn="true"
      :hide-right-forth-btn="true"
      :showPagination="true" :showToolBar="true" :showSearch="false" @refresh="getData">
      <template #leftMenu>
        <el-button type="primary" @click="handleEdit({}, 'add')" v-hasPermi="['achievementReward:assessmentReward:rewardWay:addRewardWay']">新增奖励办法</el-button>
      </template>
      <template #status="{ record }">
        <div class="flex items-center space-x-[8px]">
          <span class="h-[6px] w-[6px] rounded-[3px]"
            :style="{ backgroundColor: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }" />
          <span
            :style="{ color: assessmentStatusBgColorMap[record.status as keyof typeof assessmentStatusBgColorMap] }">{{
              managerStatusMap[record.status as keyof typeof managerStatusMap] }}</span>
        </div>
      </template>
      <template #default="{ record }">
        <el-button link type="primary" @click="handleEdit(record, 'view')" v-hasPermi="['achievementReward:assessmentReward:rewardWay:view']">查看</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleEdit(record, 'edit')" v-hasPermi="['achievementReward:assessmentReward:rewardWay:edit']">编辑</el-button>
        <el-button v-if="record.status === 1" link type="primary" @click="handleStart(record)" v-hasPermi="['achievementReward:assessmentReward:rewardWay:effect']">生效</el-button>
        <el-button v-if="record.status === 1" link type="danger" @click="handleDelete(record)" v-hasPermi="['achievementReward:assessmentReward:rewardWay:del']">删除</el-button>
      </template>
    </TableForm>

    <!-- 删除提示 -->
    <DelConfirmModal v-if="delVisible" :visible="delVisible" :loading="delLoading" text="删除后无法恢复，是否确认删除？"
      @cancel="delVisible = false" @ok="deleteReward({ id: currentRow.id })" />

    <!-- 开启奖励提示 -->
    <DelConfirmModal v-if="startVisible" :visible="startVisible" :loading="startLoading"
      :text="`是否确定生效${currentRow.name}？`" ok-type="primary" ok-text="生效" @cancel="startVisible = false"
      @ok="startReward({ id: currentRow.id, status: 2 })" />

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { rewardMethodDelete, rewardMethodPage, rewardMethodUpdateStatus, assessmentTips } from '@/api/assessment';
import { BaseSuccessRespDTO, PageBeanRewardMethodPageRespVO, RewardMethodPageRespVO } from '@/api/assessment/types';
import formateDate from '@/utils/formateDate'
import { managerStatusMap, assessmentStatusBgColorMap } from '@/utils/constText'

const router = useRouter()

const tableRef = ref()
const dataList = ref<RewardMethodPageRespVO[]>([])
const total = ref(0)
const columns = ref([
  {
    title: '序号',
    width: 48,
    formatter: (row: any, column: any, cellValue: any, index: number) => {
      return index + 1
    }
  },
  {
    title: '奖励办法名称',
    dataIndex: 'name',
  },
  {
    title: '文号',
    dataIndex: 'documentName',
    width: 200,
  },
  {
    title: '开始生效时间',
    dataIndex: 'effectiveTime',
    formatter: (row) => formateDate(row.effectiveTime).format('YYYY-MM-DD'),
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 120,
  },
  {
    title: '操作',
    width: 220,
    dataIndex: 'default',
    slotName: 'default',
  }
])

const currentRow = ref({})
// 删除
const delVisible = ref(false)

// 开启/结束 奖励
const startVisible = ref(false)

const { run: tips } = useRequest(assessmentTips, {
  manual: true,
  onSuccess: (res: boolean) => {
    if (res) {
      ElMessage({
        message: '管理办法已变更，请及时更新奖励办法!',
        type: 'warning',
        plain: true,
      })
    }
  }
})

const { run: getData, loading } = useRequest(rewardMethodPage, {
  manual: true,
  onSuccess: (res: PageBeanRewardMethodPageRespVO) => {
    const { content, totalElements } = res || {}
    dataList.value = content || []
    total.value = totalElements || 0
  }
})

const { run: deleteReward, loading: delLoading } = useRequest(rewardMethodDelete, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      delVisible.value = false
      ElMessage({
        message: '删除成功!',
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const { run: startReward, loading: startLoading } = useRequest(rewardMethodUpdateStatus, {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      startVisible.value = false
      ElMessage({
        message: '生效成功!',
        type: 'success',
        plain: true,
      })
      tableRef.value?.refreshInitPage()
    }
  }
})

const handleEdit = (row, type) => {
  router.push({ path: '/achievementReward/assessmentReward/rewardWay/detail', query: { id: row.id, type } })
}

const handleDelete = (row) => {
  currentRow.value = row
  delVisible.value = true
}

const handleStart = (row) => {
  currentRow.value = row
  startVisible.value = true
}

onMounted(() => {
  tips()
  tableRef.value?.refreshInitPage()
})

</script>

<style scoped lang="scss">
.reward-way-container {
  --at-apply: px-[20px] pb-[20px] bg-white rounded-[4px];
}
</style>